import React from 'react';
import {findDOMNode} from 'react-dom';
import echarts from 'echarts';
import * as ChartsRiseStyle from './ChartsRise.less';
import { CITY, COUNTY, SCHOOL } from '../../../../constants/area';
import isEqual from 'lodash/isEqual';

/**
 * 判断数组是否全等
 * @param  {[{key:value}]}  oldArr [description]
 * @param  {[{key:value}]}  newArr [description]
 * @return {Boolean}        [description]
 */
function isDeepEqual(oldArr,newArr) {
	for (let i=0;i<oldArr.length;i++){
		if(!isEqual(oldArr[i],newArr[i]))
			return false;
	}
	return true;
}

export default class ChartsRise extends React.Component {
		constructor(props) {
			super(props);
		}

		state = {
			switchToggle:0
		}

		drawChart=(switchChart)=>{
			let { chartsBasic, city, county, school, currentSubView } = this.props;
			let { dataSource } =chartsBasic;
			let mark=5;
			let areaName = school.selectedItem.name || county.selectedItem.name || city.selectedItem.name || '';
			let higherArea = (currentSubView==CITY)?'本省占比':false||
							 (currentSubView==COUNTY)?'本市占比':false||
							 (currentSubView==SCHOOL)?'本区占比':false;


			let number = dataSource[switchChart][0]||[];
			let scale = dataSource[switchChart][1]||[];
			
			let xAxis = number.map((item,index)=>item.time_sheet);
			let yA = number.map((item,index)=>item.result || 0)
			let yB = scale.map((item,index)=>item.y.toFixed(2))
			if (yA.length != 0&& Math.max(...yA)<=5) 
				mark = Math.max(...yA)!=0?Math.max(...yA):1;
			if (yA.length == 0)
				mark=1;
			/*if (yA.length == 0)
				yA = new Array(yB.length).fill(0);*/

			let myChart = echarts.init(findDOMNode(this.refs.chartsRise));
			
			let option={};

			option = {
				tooltip: {
					trigger: 'axis',
					formatter:'<p style="background: #5e6166; color: #fff; padding: 5px;">{b1}</p><p style="padding: 5px;">{a0}:{c0}</p><p style="padding: 5px;">{a1}:{c1}%</p>',
					backgroundColor: '#ececec',
					padding: 0,
					textStyle: {
						color: '#5e6166'
					}
				},
				legend: {
					left:'left',
					data: [`${areaName}`, `${higherArea}`]
				},
				xAxis: [{
					type: 'category',
					data: xAxis
				}],
				yAxis: [{
					name:'新增人数',
					type: 'value',
					splitNumber:mark,
					axisLine: {
			            show: false
			        }
				},{
					name:'百分比',
					type: 'value',
					axisLine: {
			            show: false
			        },
					splitLine: {
		                show: false
		            }
				}],
				series: [{
					name: `${areaName}`,
					type: 'line',
					smooth: true,
					itemStyle: {normal: {color: '#64dcdc',areaStyle: {type: 'default'}}},
					data: yA
				}, {
					name: `${higherArea}`,
					type: 'line',
					smooth: true,
					yAxisIndex:1,
					itemStyle: {normal: {color: 'orange'}},
					data: yB
				}]
			}

			myChart.setOption(option);
		}

		componentWillReceiveProps(nextProps) {
			let { switchToggle } = this.state;
			let oldCurrentSubView = this.props.currentSubView;
			let newCurrentSubView = nextProps.currentSubView;

			if (oldCurrentSubView != newCurrentSubView) {
				this.setState({
					switchToggle: 0
				});
			};
		}
		
		componentDidUpdate(prevProps, prevState) {
			let { switchToggle } = this.state;
			this.drawChart(switchToggle)
		}

		componentDidMount() {
			let { switchToggle } = this.state;
			this.drawChart(switchToggle)
		}

		shouldComponentUpdate(nextProps, nextState) {
			let { switchToggle } = this.state;
			let oldChartsBasic = this.props.chartsBasic;
			let newChartsBasic = nextProps.chartsBasic;
			
			let oldDataSource = oldChartsBasic.dataSource;
			let newDataSource = newChartsBasic.dataSource;

			let oldNumbers = oldDataSource[switchToggle][0], 
				oldScales = oldDataSource[switchToggle][1];

			let newNumbers = newDataSource[switchToggle][0],
				newScales = newDataSource[switchToggle][1];

			// if (!isEqual(this.props.city, nextProps.city) 
			// 	|| !isEqual(this.props.county, nextProps.county)
			// 	|| !isEqual(this.props.school, nextProps.school))
			// 	return true;
			
			if (oldNumbers.length != newNumbers.length || oldScales.length != newScales.length)
				return true;

			if (!isDeepEqual(oldNumbers, newNumbers) || !isDeepEqual(oldScales, newScales))
				return true;

			if (this.state.switchToggle != nextState.switchToggle)
				return true;

			return false;
		}

		handleChangeChart=(flag)=>{
			this.setState({
				switchToggle: flag
			})
		}
		
		render() {
			let { switchToggle } = this.state;
			let { currentSubView } = this.props;

			return ( 
				<div className={ChartsRiseStyle.chartsRise} onChange={this.drawChart}>
					<div className='buttonList'>
						<button onClick={() => this.handleChangeChart(0)} className={switchToggle==0?'click':''}>新增学生</button>
						<button onClick={() => this.handleChangeChart(1)} className={switchToggle==1?'click':''}>新增教师</button>
						{currentSubView!=SCHOOL&&<button onClick={() => this.handleChangeChart(2)} className={switchToggle==2?'click':''}>新增学校</button>}
					</div>
					<div ref = 'chartsRise' className='chart' ></div>
				</div>
				)
			}
		}